// 走马灯
$color:white !default;
%color {
    color: $color;
}

%float {
    float: left;
}

%pos {
    display: flex;
    align-items: center;
}
%OneHunder{
    width: 100%;
    height: 100%;
}
%padding{
        padding: 5px 0px 5px 0px;
    margin: 5px 6px 5px 15px;
}
@for $background from 1 to 3 {
    .item-#{1}
{
background: url("https://pic.cnrmall.com/image/70/0c/700c2f9097622de35f6afdbbdfe12bf9.jpg") no-repeat;        background-position-x: 366px;
background-color: rgb(197, 0, 12);
}
.item-#{2}
{
background: url("https://pic.cnrmall.com/image/67/bb/67bbe6599f7f8c018affb74208e73334.jpg") no-repeat;
background-position-x: 366px;
background-color: rgb(234, 235, 240);

}
.item-#{3}
{
background: url("https://pic.cnrmall.com/image/70/0c/700c2f9097622de35f6afdbbdfe12bf9.jpg") no-repeat;
background-position-x: 366px;
background-color: rgb(197, 0, 12);
}
}
$positionRelve: relative;
$positionPostion :absolute;
%postion{
    position: $positionRelve;
}
%postionPostion{
    position: $positionPostion;
}
%brenPostion{
    @extend %postionPostion;
    width: 28px;
    $height: 62px;
    height: $height;
    background: rgba(0,0,0,0.2);
    text-align: center;
    line-height: $height;
    font-family: simsun;
    font-size: 22px;
    color: white;
    z-index: 25;
    cursor: pointer;
}
#banner {
    @include common_wd;
    @include height(479px);
   @extend %postion;
    #bren,#prev{
        @extend %brenPostion;
    }
    
    #bren{
     @include TopOrLeft(230px,389px);
    }
    #prev{
        @include TopOrLeft(230px,1108px) 
    }
    
    // 小圆点
    div[name="cricle"]{
        width: 400px;
        height: 30px;
        // background-color: yellowgreen;
        @include TopOrLeft(436px,541px);
        @extend %postionPostion;
        display: flex;
        justify-content: center;
        p{
            $width: 9px;
            width: $width;
            height: $width;
            background: #3E3E3E;
            @extend %float;
            border-radius:50%;
            margin-left: 5px;
            z-index: 25;
            cursor: pointer;
            &:hover{
             background-color: red;
            }
        
        }
    }

    #bannerNeiron{
        $width: 100%;
        width: $width;
        height: 388px;
        background-color: red;
        @extend %postionPostion;
        top: 79px;
        overflow: hidden;
        ul{
            width: 6280px;
            height: 100%;
        }
        li{
            width: 1519px;
            height: 100%;
            float: left;
            background-position-x: 366px;
            a{
                display: block;
                margin: auto;
                width: 790px;
                height: 100%;
            }
        }
    }
    .inner {
        position: relative;
        height: 481.1px;
         //左侧导航
        #searchDaohang {
            width: 180px;
            @include height(97%);
            background-color: #6E6568;
            @extend %float;
            overflow: hidden;
            ul {
                margin-top: 10px;
                margin-bottom: 10px;
            }
            li {
                font-size: 14px;
                padding-left: 12px;
                @extend %color;
                a {
                    @extend %color;
                }
            }
        }
    }
}

%livebox {
    width: 90px;
    height: 59px;
}
.toplive {
    @extend %float;
    $width: 998px;
    z-index: 25;
    width: $width;
    @include height(71px);
  @extend %padding;
  @extend %postionPostion;
  top: -5px;
  left: 200px;
    div {
        @extend %float
    }
    .left {
        width: 380px;
        @include height(51px);
        border: 1px solid #e4e4e4;
        @extend %padding;
        @extend %pos; //直播模块
        .zhibo {
            margin-left: 5px;
            width: 100px;
            height: 59px;
            display: block;
            background: url("../img/live.png") no-repeat;
        } //电视盒子模块
        .live_box {
            @extend %livebox;
            overflow: hidden;
            position: $positionRelve;
            img{
               position: $positionPostion;
               top: -45px;
            }
        }
        a{
            @extend %livebox;
            position: $positionPostion;
            left: 113px;
            background: url("https://statics.cnrmall.com/web/static/img/radio.png");
        }
    }
}

#spanGoods{
    width: 175px;
    height: 53px;
    margin-left: 20px;
    @extend %pos;
    flex-direction: column;
    justify-content: center;
    p[name="header"]{
  cursor: pointer;
 height: 24px;
  &:hover{
    color: #C81623;
  }
    }
    #watchZhibo{
        @extend %pos;
        // width: 175px;
        justify-content: space-between;
p{
    color: red;
    span{
        font-size: 20px;
    }
}
button{
    width: 86px;
    height: 24px;
    @include input_resert;
    border: 1px solid red;
    color: red;
    margin-left: 10px;
    margin-right: 10px;
    box-shadow: 1px 1px 2px #e3d5d5;
}
    }
}

#displayNone {
    width: 1000px;
    @include height(400px);
    background-color: white;
    z-index: 20;
    position: absolute;
    display: none;
    left: 179px;
    top: 0px;
    border: 1px solid #f7f7f7;
    border-top: 0;
    background-color: #f7f7f7;
}

.zhiboRight{
    @extend %livebox;
    background: url("../img//live.png") no-repeat -106px;
    img{
        float: left;
    }
    .spanGoods{
        float: left;
    }
}


// 点击变色
.active{
    background-color: red !important;
}

img[name="Gif_img"]{
    height: 69px;
}